import utils from './utils.js'
import addDiv from './add-div.js'
import ctrls from './ctrls.js'

let data = [{
	id: 1,
	system: "windows",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "idle",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}, {
	id: 2,
	system: "windows",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "building",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}, {
	id: 3,
	system: "ubuntu",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "building",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}, {
	id: 4,
	system: "debin",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "idle",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}, {
	id: 5,
	system: "suse",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "building",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}, {
	id: 6,
	system: "cent_os",
	site: "bjstdmngbgr08.thoughtworks.com",
	status: "building",
	ip: "192.168.1.102",
	filepath: "/var/lib/cruise-agent",
	resource: ["Firefox", "Safari", "Ubuntu", "Chrome"]
}]

let mainList = document.getElementById("main-list");

function init() {
	data.forEach(item => {
		let systemcells = "";
		item.resource.forEach(it => {
			systemcells += `<div class="system-cell row middle-span">
									<div class="text">${it}</div>
									<div class="icon-trash" data-id="${item.id}" data-text="${it}"></div>
								</div>`
		})

		let nodeChild = utils.parseDom(`<div class="list-cell row" id="cell_${item.id}">
						<div class="image-div">
							<img src="./static/imgs/${item.system}.png" alt="" />
						</div>
						<div class="col around-span">
							<div class="row infos middle-span">
								<div class="icon-desktop"></div>
								<div class="siteurl">${item.site}</div>
								<div class="status ${item.status}">${item.status}</div>
								<div class="icon-info"></div>
								<div class="ip">${item.ip}</div>
								<div class="icon-folder"></div>
								<div class="filepath">${item.filepath}</div>
							</div>
							<div class="row tools">
								<div class="add-icon col center-span middle-span" data-id="${item.id}">
									<div class="icon-plus"></div>
								</div>
								` + systemcells +
			`</div>
						<div class="deny-icon row middle-span">
									<div class="icon-deny"></div>
									<div>Deny</div>
								</div>
							</div>

					</div>`);
		mainList.appendChild(nodeChild[0])
	})

	let addIcons = document.getElementsByClassName("add-icon");

	for(let i = 0; i < addIcons.length; i++) {
		addIcons[i].addEventListener("click", function(e) {
			let addElement = this;
			let id = this.getAttribute("data-id");
			let addRect = addElement.getBoundingClientRect();

			addDiv.show(addRect.left, addRect.top)

			ctrls.setCtrlId(id)
		})
	}

	let deleteIcons = document.getElementsByClassName("icon-trash");

	for(let i = 0; i < deleteIcons.length; i++) {
		deleteIcons[i].addEventListener("click", function(e) {
			let deleteEle = this;

			let id = this.getAttribute("data-id");
			let text = this.getAttribute("data-text");

			let dataIndex = data.findIndex(item => item.id == id);
			let textIndex = data[dataIndex].resource.findIndex(item => item == text);
			data[dataIndex].resource.splice(textIndex, 1)

			mainList.innerHTML = "";

			init();
		})
	}

	calCount();
}

function addResource(id, value) {
	const browserList = ["Firefox", "Safari", "Ubuntu", "Chrome"];
	let values = value.split(",")
	let dataIndex = data.findIndex(item => item.id == id);

	values.forEach(item => {
		item = item.substring(0, 1).toUpperCase() + item.substring(1);
		/*if(browserList.indexOf(item) >= 0 && data[dataIndex].resource.indexOf(item) < 0) {
			data[dataIndex].resource.push(item)
		}*/
		data[dataIndex].resource.push(item)
	})

	document.getElementById("addInput").value = "";

	mainList.innerHTML = "";

	init();
}

function calCount() {
	let all = data.length;
	let buildCount = 0;
	let idleCount = 0;

	data.forEach(item => {
		if(item.status == "building") {
			buildCount++
		} else if(item.status == "idle") {
			idleCount++
		}
	})

	document.getElementById("build-count").innerText = buildCount;
	document.getElementById("idle-count").innerText = idleCount;
	document.getElementById("all-count").innerText = all;
}

export default {
	init,
	addResource
}